// 控制页面右侧配置项渲染
if (!com) var com = {}
if (!com.logicpartners) com.logicpartners = {}

// designer:window.canvasDesigner
// canvas:document.getElementById('labelDesigner')
com.logicpartners.propertyInspector = function (designer, canvas) {
  this.canvas = canvas
  this.canvasElement = $(canvas)
  this.labelDesigner = designer
  this.activeElement = null
  this.propertyNodes = {}
  this.boundingBox = null
  var elementKey = null
  this.propertyViewContainer = $('#designerPropertyContainer') // 右侧配置项

  this.propertyView = $('<div></div>').addClass('designerPropertyContent').appendTo(this.propertyViewContainer)

  this.update = function (activeElement, flag) {
    // 当前选择的左侧图例
    if (!activeElement) return
    var self = this
    var keys = []
    if (this.activeElement == activeElement) {
      for (var key in activeElement.props) {
        if (flag) {
          $('#content').remove()
          if (!keys[key]) {
            keys[key] = true
            // 渲染配置项标题
            elementKey = $('<div >' + activeElement.props[key].label + '</div>').addClass('propertyItemLabel')
            // 渲染输入框以及下拉选择框
            var elementValue
            if (activeElement.props[key].options) {
              elementValue = $('<select   name="' + key + '" ></select>').addClass('propertyItemValue')
              activeElement.props[key].options.forEach((i) => {
                elementValue.append($('<option value="' + i.value + '" >' + i.label + '</option>'))
              })
              elementValue.val(activeElement[key])
            } else if (activeElement.props[key].button) {
              elementValue = $('<button >' + activeElement.props[key].button + '</button>').addClass(
                'propertyItemValue',
              )
            } else {
              elementValue = $('<input  type="text" name="' + key + '" value="' + activeElement[key] + '">').addClass(
                'propertyItemValue',
              )
            }
            // 输入框设置只读以及事件操作 更新canvas图
            if (!activeElement.readonly || !activeElement.readonly.includes(key)) {
              // 没有只读操作
              if (activeElement.props[key].options) {
                elementValue.on('change', { objectProperty: key }, function (event) {
                  self.activeElement[event.data.objectProperty] = $(this).val()
                  if (activeElement.props.contentSet) {
                    if (activeElement.contentSet == 'dataSource') {
                      activeElement.props.text.label = '示例内容'
                      let index = activeElement.readonly.findIndex((i) => i == 'dataSourcefield')
                      activeElement.readonly.splice(index, 1)
                      // activeElement.props.dataSourcefield.options = getOptions2()
                      self.update(activeElement, true)
                    } else {
                      activeElement.props.text.label = '内容'
                      activeElement.readonly.push('dataSourcefield')
                      self.update(activeElement, true)
                    }
                  }
                  self.labelDesigner.updateCanvas()
                })
              } else if (activeElement.props[key].button) {
                elementValue.on('click', { objectProperty: key }, function (event) {
                  self.activeElement[event.data.objectProperty] = $(this).val()
                  self.labelDesigner.updateCanvas(event.data.objectProperty)
                })
              } else {
                elementValue
                  .on('blur', { objectProperty: key }, function (event) {
                    self.activeElement[event.data.objectProperty] = $(this).val()
                    self.labelDesigner.updateCanvas()
                  })
                  .on('keypress', { objectProperty: key }, function (event) {
                    if (event.which == 13) {
                      event.preventDefault()
                      self.activeElement[event.data.objectProperty] = $(this).val()
                      self.labelDesigner.updateCanvas()
                    }
                  })
              }
            } else {
              // Draw readonly textbox.
              elementValue.prop('readonly', true).prop('disabled', true)
            }

            this.propertyNodes[key] = elementValue

            var elementContainer = $('<div id="content"></div>')
              .css({
                clear: 'both',
                'padding-top': '4px',
              })
              .append(elementKey)
              .append(elementValue)
            this.propertyView.append(elementContainer)
          }
        }

        if (!activeElement.readonly || !activeElement.readonly.includes(key)) {
          this.propertyNodes[key].val(activeElement[key])
        }
      }
    } else {
      this.activeElement = activeElement
      this.propertyView.html('')
      for (var key in activeElement.props) {
        if (!keys[key]) {
          keys[key] = true
          // 渲染配置项标题
          elementKey = $('<div >' + activeElement.props[key].label + '</div>').addClass('propertyItemLabel')
          // 渲染输入框以及下拉选择框
          var elementValue
          if (activeElement.props[key].options) {
            elementValue = $('<select  name="' + key + '" ></select>').addClass('propertyItemValue')
            activeElement.props[key].options.forEach((i) => {
              elementValue.append($('<option value="' + i.value + '" >' + i.label + '</option>'))
            })
            elementValue.val(activeElement[key])
          } else if (activeElement.props[key].button) {
            elementValue = $('<button >' + activeElement.props[key].button + '</button>').addClass('propertyItemValue')
          } else {
            elementValue = $('<input  type="text" name="' + key + '" value="' + activeElement[key] + '">').addClass(
              'propertyItemValue',
            )
          }
          // 输入框设置只读以及事件操作 更新canvas图
          if (!activeElement.readonly || !activeElement.readonly.includes(key)) {
            // 没有只读操作
            if (activeElement.props[key].options) {
              elementValue.on('change', { objectProperty: key }, function (event) {
                self.activeElement[event.data.objectProperty] = $(this).val()
                if (activeElement.props.contentSet) {
                  if (activeElement.contentSet == 'dataSource') {
                    activeElement.props.text.label = '示例内容'
                    let index = activeElement.readonly.findIndex((i) => i == 'dataSourcefield')
                    activeElement.readonly.splice(index, 1)
                    // activeElement.props.dataSourcefield.options = getOptions2()
                    self.update(activeElement, true)
                  } else {
                    activeElement.props.text.label = '内容'
                    activeElement.readonly.push('dataSourcefield')
                    self.update(activeElement, true)
                  }
                }
                self.labelDesigner.updateCanvas()
              })
            } else if (activeElement.props[key].button) {
              elementValue.on('click', { objectProperty: key }, function (event) {
                self.activeElement[event.data.objectProperty] = $(this).val()
                self.labelDesigner.updateCanvas(event.data.objectProperty)
              })
            } else {
              elementValue
                .on('blur', { objectProperty: key }, function (event) {
                  self.activeElement[event.data.objectProperty] = $(this).val()
                  self.labelDesigner.updateCanvas()
                })
                .on('keypress', { objectProperty: key }, function (event) {
                  if (event.which == 13) {
                    event.preventDefault()
                    self.activeElement[event.data.objectProperty] = $(this).val()
                    self.labelDesigner.updateCanvas()
                  }
                })
            }
          } else {
            // Draw readonly textbox.
            elementValue.prop('readonly', true).prop('disabled', true)
          }
          this.propertyNodes[key] = elementValue
          var elementContainer = $('<div id="content"></div>')
            .css({
              clear: 'both',
              'padding-top': '4px',
            })
            .append(elementKey)
            .append(elementValue)
          this.propertyView.append(elementContainer)
        }
      }
    }
  }
}
